<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <!-- import Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>Welcome {{name}} to learn Vue</h2>
            <!-- Without vue -->
            <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
            <!-- Default defined by Vue -->
            <input type="text" placeholder="enter" @keyup.enter="showInfo">
            <!-- Self-defined -->
            <input type="text" placeholder="caps-lock" @keyup.caps-lock="showInfo">
            <!-- Special must user keydown, when keyup the focus is moved away -->
            <input type="text" placeholder="tab" @keydown.tab="showInfo">
            <!-- Self-defined name: not recommended-->
            <input type="text" placeholder="huiche" @keydown.huiche="showInfo">
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
        Vue.config.keyCodes.huiche = 13
        
        new Vue({
            el:'#root',
            data:{
                name:'Cetacean'
            },
            methods:{
                /**
                 * @keyup = "showInfoWithoutVue"
                **/
                showInfoWithoutVue(e){
                    if(e.keyCode !== 13) return         // use keycode to judge enter
                    console.log(e.target.value)
                },
                showInfo(e){
                    console.log(e.key, e.keyCode)
                }
            }
        })
    </script>
</html>

